.verfiy_view {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9;

    &.hide {
        animation-name: hideToOut;
        animation-duration: 500ms;
        animation-timing-function:  linear;
        animation-delay: 1.5s, 5.5s;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-direction: normal;
        overflow: hidden;
    }

    @keyframes hideToOut {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
            pointer-events: none;
        }
    }

    @-webkit-keyframes zoomIn {
        0% {
            opacity: 0;
            -webkit-transform: scale(.2);
            transform: scale(.2)
        }

        50% {
            opacity: 1
        }
    }

    @keyframes zoomIn {
        0% {
            opacity: 0;
            -webkit-transform: scale(.2);
            transform: scale(.2)
        }

        50% {
            opacity: 1
        }
    }

    @-webkit-keyframes showIn {
        0% {
            visibility: visible
        }

        to {
            visibility: visible
        }
    }

    @keyframes showIn {
        0% {
            visibility: visible
        }

        to {
            visibility: visible
        }
    }

    @-webkit-keyframes showOut {
        0% {
            visibility: hidden
        }

        to {
            visibility: hidden
        }
    }

    @keyframes showOut {
        0% {
            visibility: hidden
        }

        to {
            visibility: hidden
        }
    }

    @-webkit-keyframes inRight {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(.5rem, 0, 0);
            transform: translate3d(.5rem, 0, 0)
        }

        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }

    @keyframes inRight {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(.5rem, 0, 0);
            transform: translate3d(.5rem, 0, 0)
        }

        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }

    @-webkit-keyframes outRight {
        0% {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }

        to {
            opacity: 0;
            -webkit-transform: translate3d(-.5rem, 0, 0);
            transform: translate3d(-.5rem, 0, 0)
        }
    }

    @keyframes outRight {
        0% {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }

        to {
            opacity: 0;
            -webkit-transform: translate3d(-.5rem, 0, 0);
            transform: translate3d(-.5rem, 0, 0)
        }
    }

    @-webkit-keyframes outRight2 {
        0% {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }

        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }

    @keyframes outRight2 {
        0% {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }

        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }

    @-webkit-keyframes inUp {

        0%,
        50%,
        99%,
        to {
            overflow: visible;
            -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
            animation-timing-function: cubic-bezier(.215, .61, .355, 1)
        }

        0% {
            height: 0%
        }

        50% {
            height: 100%
        }

        99% {
            height: 2%
        }

        to {
            height: 0%;
            overflow: hidden
        }
    }

    @keyframes inUp {

        0%,
        50%,
        99%,
        to {
            overflow: visible;
            -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
            animation-timing-function: cubic-bezier(.215, .61, .355, 1)
        }

        0% {
            height: 0%
        }

        50% {
            height: 100%
        }

        99% {
            height: 2%
        }

        to {
            height: 0%;
            overflow: hidden
        }
    }

    @-webkit-keyframes inTxtUp {
        0% {
            visibility: visible;
            -webkit-transform: translateY(0rem);
            transform: translateY(0rem)
        }

        25% {
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }

        75% {
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }

        to {
            -webkit-transform: translateY(-1.5rem);
            transform: translateY(-1.5rem)
        }
    }

    @keyframes inTxtUp {
        0% {
            visibility: visible;
            -webkit-transform: translateY(1.5rem);
            transform: translateY(1.5rem)
        }

        25% {
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }

        75% {
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }

        to {
            -webkit-transform: translateY(-1.5rem);
            transform: translateY(-1.5rem)
        }
    }

    @-webkit-keyframes inTxtUp2 {
        0% {
            visibility: visible;
            -webkit-transform: translateY(0rem);
            transform: translateY(0rem)
        }

        25% {
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }

        75% {
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }

        to {
            visibility: visible;
            -webkit-transform: translateY(-1.5rem);
            transform: translateY(-1.5rem)
        }
    }

    @keyframes inTxtUp2 {
        0% {
            visibility: visible;
            -webkit-transform: translateY(1.5rem);
            transform: translateY(1.5rem)
        }

        25% {
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }

        75% {
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }

        to {
            visibility: visible;
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }
    }

    .InRight {
        -webkit-animation-name: zoomInRight;
        animation-name: zoomInRight
    }

    .zoomIn {
        -webkit-animation-name: zoomIn;
        animation-name: zoomIn
    }

    .animated {
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards
    }

    .scan-wrap {
        position: relative;
        top: calc(50% - 4rem);
        transform: translate(0, -50%);
    }

    .scan-wrap .scan-mod {
        margin: 0 auto;
    }

    .scan-wrap .scan-img,
    .scan-wrap .scan-mod {
        position: relative;
        width: 10.05rem;
        height: 10.85rem
    }

    .scan-wrap .scan-img {
        background-image: url(../../assets/scan1@2x.png);
        background-repeat: no-repeat;
        background-size: 10.05rem 10.85rem
    }

    .scan-wrap .scan-img:before {
        position: absolute;
        top: 1.4rem;
        left: 1.5rem;
        width: 7rem;
        height: 8.05rem;
        content: "";
        background-image: url(../../assets/bg@2x.png);
        background-size: 7rem 8.05rem
    }

    .scan-wrap .scan-cont {
        position: absolute;
        top: .4rem;
        left: 1.5rem;
        width: 7rem;
        height: 10.05rem;
        -webkit-animation-name: showIn, showOut;
        animation-name: showIn, showOut;
        -webkit-animation-duration: 4s, 4s;
        animation-duration: 4s, 4s;
        -webkit-animation-timing-function: linear, linear;
        animation-timing-function: linear, linear;
        -webkit-animation-delay: 1.5s, 5.5s;
        animation-delay: 1.5s, 5.5s;
        -webkit-animation-iteration-count: 1, 1;
        animation-iteration-count: 1, 1;
        -webkit-animation-fill-mode: forwards, forwards;
        animation-fill-mode: forwards, forwards;
        -webkit-animation-direction: normal, normal;
        animation-direction: normal, normal
    }

    .scan-wrap .scan-cont i {
        position: absolute;
        top: 3rem;
        left: 1.4rem;
        display: block;
        width: 4.25rem;
        height: 4.25rem;
        content: "";
        background-image: url(../../assets/ic_account@2x.png);
        background-size: 4.25rem 4.25rem;
        opacity: 0;
        -webkit-animation-name: inRight, outRight;
        animation-name: inRight, outRight;
        -webkit-animation-duration: .5s, .5s;
        animation-duration: .5s, .5s;
        -webkit-animation-timing-function: linear, linear;
        animation-timing-function: linear, linear;
        -webkit-animation-delay: 1.5s, 3.5s;
        animation-delay: 1.5s, 3.5s;
        -webkit-animation-iteration-count: 1, 1;
        animation-iteration-count: 1, 1;
        -webkit-animation-fill-mode: forwards, forwards;
        animation-fill-mode: forwards, forwards;
        -webkit-animation-direction: normal, normal;
        animation-direction: normal, normal
    }

    .scan-wrap .scan-cont .cont {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        overflow: hidden;
        background-image: url(../../assets/bg_account@2x.png);
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 7rem 10.05rem;
        -webkit-animation: 2s 2s inUp forwards;
        animation: 2s 2s inUp forwards
    }

    .scan-wrap .scan-cont .cont:before {
        position: absolute;
        top: -.04rem;
        left: -1.86rem;
        z-index: 2;
        width: 6.52rem;
        height: 100%;
        content: "";
        background-image: url(../../assets/line@2x.png);
        background-repeat: no-repeat;
        background-size: 6.52rem .04rem
    }

    .scan-wrap .scan-cont .cont:after {
        position: absolute;
        top: 0;
        left: -1.86rem;
        z-index: 1;
        width: 6.52rem;
        height: 100%;
        content: "";
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .3)), to(hsla(0, 0%, 100%, 0)));
        background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .3), hsla(0, 0%, 100%, 0))
    }

    .scan-wrap .scan-cont2 {
        visibility: hidden;
        -webkit-animation-delay: 4s, 8s;
        animation-delay: 4s, 8s
    }

    .scan-wrap .scan-cont2 i {
        background-image: url(../../assets/ic_security@2x.png);
        -webkit-animation-delay: 4s, 6s;
        animation-delay: 4s, 6s
    }

    .scan-wrap .scan-cont2 .cont {
        background-image: url(../../assets/bg_security@2x.png);
        -webkit-animation-delay: 4.5s;
        animation-delay: 4.5s
    }

    .scan-wrap .scan-cont3 {
        visibility: hidden;
        -webkit-animation-name: showIn, showIn;
        animation-name: showIn, showIn;
        -webkit-animation-delay: 6.5s, 10.5s;
        animation-delay: 6.5s, 10.5s
    }

    .scan-wrap .scan-cont3 i {
        background-image: url(../../assets/ic_system@2x.png);
        -webkit-animation-name: inRight, outRight2;
        animation-name: inRight, outRight2;
        -webkit-animation-delay: 6.5s, 8.5s;
        animation-delay: 6.5s, 8.5s
    }

    .scan-wrap .scan-cont3 .cont {
        background-image: url(../../assets/bg_system@2x.png);
        -webkit-animation-delay: 7s;
        animation-delay: 7s
    }

    .scan-wrap .scan-txt {
        position: relative;
        height: 1.5rem;
        overflow: hidden;
        font-size: 0.6rem;
        color: #999;
        text-align: center
    }

    ul,
    li {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

    .scan-wrap .scan-txt li {
        position: absolute;
        width: 100%;
        height: 1.5rem;
        margin: 0;
        line-height: 1.5rem;
        visibility: hidden;
        -webkit-animation: 2s inTxtUp forwards;
        animation: 2s inTxtUp forwards
    }

    .scan-wrap .scan-txt .fore2 {
        -webkit-animation-delay: 1.5s;
        animation-delay: 1.5s
    }

    .scan-wrap .scan-txt .fore3 {
        -webkit-animation-name: inTxtUp2;
        animation-name: inTxtUp2;
        -webkit-animation-delay: 3.5s;
        animation-delay: 3.5s
    }
}